﻿*{margin: 0; padding: 0; border:0;}
body{font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", Arial, sans-serif;}
.top{width:100%; height: 50px; background: #ff8d09; color: #fff; font-size: 18px; text-align: center; line-height: 50px; position:fixed; top:0px; left: 0px; z-index:1;}
.top_margin{margin-top:50px;}
.fbox{
   display: -moz-box; display: -webkit-box; display: box;
}

.fboxh{
    width:100%;
    height:100%;
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;//垂直排列
}
.sbox1{
    -moz-box-flex:1; -webkit-box-flex:1; box-flex:1;
}
.sbox2{
    -moz-box-flex:2; -webkit-box-flex:2; box-flex:2;
}
.sbox3{
    -moz-box-flex:3; -webkit-box-flex:3; box-flex:3;
}
.sbox4{
    -moz-box-flex:4; -webkit-box-flex:4; box-flex:4;
}
ul,li{ list-style: none;list-style-type:none;}
.page {display: none;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;overflow: hidden;}

#datescroll div{float: left;margin-left: 10%;margin-top: 15px;padding-right: 22px;}
#datescroll_datetime div{float: left;margin-left: 10%;padding-right: 22px;}
#yearwrapper{position: absolute;left: 0;top:45px;bottom: 60px;width:80%;}
#monthwrapper{position: absolute;left: 26%;top:45px;bottom: 60px;width:80%;}
#daywrapper{position: absolute;left: 50%;top:45px;bottom: 60px;width:80%;}
#Hourwrapper{position: absolute;left: 0;top:195px;bottom: 68px;width:80%;}
#Minutewrapper{position: absolute;left: 26%;top:195px;bottom: 68px;width:80%;}
#Secondwrapper{position: absolute;left: 50%;top:195px;bottom: 68px;width:80%;}
#Hourwrapper ul li{color: #898989;font-size: 12px;}
#Minutewrapper ul li{color: #898989;font-size: 12px;}
#Secondwrapper ul li{color: #898989;font-size: 12px;}
#yearwrapper ul li{color: #898989;font-size: 12px;}
#monthwrapper ul li{color: #898989;font-size: 12px;}
#daywrapper ul li{color: #898989;font-size: 12px;}
#markyear{position:relative; margin-left: 76px;top:-2px;}
#markmonth{position:relative; margin-left: 40px;top:-2px;}
#markday{position:relative; margin-left: 42px;top:-2px;}
#markhour{position:relative; margin-left: 62px;top:-2px;}
#markminut{position:relative; margin-left: 58px;top:-2px;}
#marksecond{position:relative; margin-left: 68px;top:-2px;}
#dateheader{width: 100%;height: 50px;background: #79C12F;text-align: center;color: #fff;line-height: 50px;font-size: 20px;}
#setcancle ul{text-align: center;line-height: 30px; margin:1px auto;font-size: 20px;}
#setcancle ul li{border-radius:3px;float: left;width: 40%;height: 30px;list-style-type: none;font-family:'microsoft yahei';font-size:16px;}
#dateconfirm{position: absolute;background:#ff8d09;left:20px;color:#fff;}
#datecancle{position: absolute;background:  #dcdddd;right:20px;width: 40%;color:#666;}
#dateshadow{display: none;position: absolute;width: 100%;height: 100%;top:0;left:0;background: #000; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}
#datePage{font-size: 22px; border-radius: 3px; position:absolute;top:110px;MARGIN-RIGHT: auto;vertical-align:middle; MARGIN-LEFT: auto;width: 80%;;height: 240px;background: #FFFFFF;z-index:9999999;}
#datetitle{width: 100%;height:50px;background: #ff8d09;text-align: center;color: #fff;line-height: 50px;font-size: 20px;font-family:'microsoft yahei';}
#datetitle h1{font-weight:normal;}
#datemark{font-size: 18px;left:5%;width: 90%;height: 20px;position:absolute;top:108px;background:#eee;border:1px solid #eee;}
#timemark{font-size: 18px;left:5%;width: 90%;height: 20px;position:absolute;top:242px;background:#eee;border:1px solid #eee;}
#datescroll{background: #F8F8F8;width:94%; margin:10px 3%;border: 1px solid #E0E0E0;border-radius: 4px;height: 120px;text-align: center;line-height: 40px;}
#datescroll_datetime{display: none;background:#F8F8F8;width:94%; margin:10px 3%;margin-top: 10px;border: 1px solid #E0E0E0;border-radius: 4px;height: 120px;text-align: center;line-height: 40px;}
#yearwrapper ul,#monthwrapper ul,#daywrapper ul{width:40%;}
#Hourwrapper ul,#Minutewrapper ul,#Secondwrapper ul{width:40%;}
#dateFooter{width:100%;background: #fff;height: 50px;bottom: 0px;position: absolute;}


html,body{width: 100%;height: 100%;}
*{margin: 0px;padding: 0px}
.mydark{width:100%;height:100%;z-index:9998;opacity: 0.35;background: #000;position: fixed;top:0px;}
.mydive_1{width:100%;height:100%;z-index:9999;position: fixed;top:35%}
.mytangchuang{width:200px;height:130px;background:#fff;margin: 0px auto;border-radius: 8px !important;z-index:9999;padding: 15px 25px 0px 25px}
.mytime{width:200px;height:125px;background:#fff;margin: 0px auto;border-radius: 8px !important;z-index:9999;padding: 20px 25px 0px 25px}
.mycircle{height: 50px;margin: 0px auto;width: 50px;background: #bbb;border-radius: 100% !important;text-align: center;line-height: 50px;font-size: 35px;color: #ff8d09}
.mycontent2{ margin-top:5px;font-size: 12px;text-align: center;}
.mycontent0{margin-top:23px;font-size: 14px;text-align: center;line-height: 20px}
.bn1{line-height: 30px; float: left;text-align: center;border: 1px solid #bbb;width:80px;height: 30px;margin: 12px 0px 0px 0px;border-radius: 4px !important}
.bn2{line-height: 30px; float: right;text-align: center;width:80px;height: 30px;margin: 12px 0px 0px 0px;border-radius: 4px !important;background: #ff8d09;color: #fff}
